<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-table-grid-down {
            display: none;
        }
        .layui-table td, .layui-table th {
            min-width: 40px;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">财务管理</a>
            <a>
                <cite>工人工资结算</cite>
            </a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid labelAuto">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form">
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">工程年度</label>
                                <div class="layui-input-block">
                                    <select name="" id="yearId">
                                        <option value="0">-</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">项目</label>
                                <div class="layui-input-block">
                                    <select name="" id="projectId">
                                        <option value="0">-</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">工种</label>
                                <div class="layui-input-block">
                                    <select name="" id="professionId">
                                        <option value="0">-</option>
                                    </select>
                                </div>
                            </div>
                            <!--                            <div class="layui-inline">-->
                            <!--                                <label class="layui-form-label">状态</label>-->
                            <!--                                <div class="layui-input-block">-->
                            <!--                                    <select name="" id="status">-->
                            <!--                                        <option value="0">-</option>-->
                            <!--                                        <option value="1">在岗</option>-->
                            <!--                                        <option value="2">待岗</option>-->
                            <!--                                        <option value="3">请假</option>-->
                            <!--                                        <option value="4">离职</option>-->
                            <!--                                    </select>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="layui-inline">
                                <label class="layui-form-label">清算状态</label>
                                <div class="layui-input-block">
                                    <select name="" id="isFinish" style="width: 40%;">
                                        <option value="">-</option>
                                        <option value="0">未清算</option>
                                        <option value="1">已清算</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索</label>
                                <div class="layui-input-block">
                                    <input type="search" autocomplete="off" class="layui-input" id='searchInput'>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../statics/plugins/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        $('#yearId').empty().html(yearSelect());
        $('#projectId').empty().html(projectSelect());
        $('#professionId').empty().html(professionSelect());
        form.render();
        // 异步数据加载
        var data1 = [];
        var dayValueLists = [];
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/finance/wage/managerWages', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count
                };
            },
            method: 'POST',
            where: {
                projectId: 0,
                professionId: null,
                isFinish: '',
                search: "",
                yearId: Number($('#yearId').val()),
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter','exports'],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '4%'},
                    {field: 'jobNumber', title: '工号', width: '6%'},
                    {field: 'name', title: '姓名', width: '6%'},
                    {field: 'professionName', title: '工种', width: '8%'},
                    {
                        title: '在职状态', width: '6%', templet: function (d) {
                            return `${d.status == 1 ? "在岗" : d.status == 2 ? "待岗" : d.status == 3 ? "请假" : "离职"}`
                        }
                    },
                    {
                        field: '', title: '余额', width: '8%', templet: function (d) {
                            var wage = d.wage;
                            var zj = '';
                            for (var i in wage) {

                                zj = Number(zj) + ((wage[i].workmanAccounts) + (wage[i].handymanAccounts) + (wage[i].attendance) * (d.dayValue) - (wage[i].materialAccounts) - (wage[i].livingRecharge) + (wage[i].livingRefund) - (wage[i].loan));
                            }
                            return zj;
                        }
                    },
                    {
                        field: 'settleAccount', title: '清算金额', width: '12%', templet: function (d) {
                            if (d.isFinish == 0) {
                                return `<input class="layui-input" type='number' min=0 value='${d.settleAccount}'>`
                            } else {
                                return d.settleAccount
                            }
                        }
                    },
                    {
                        field: 'finishTime', title: '清算时间', width: '10%', templet: function (d) {
                            return d.finishTime.substr(0,10);
                        }
                    },
                    {
                        title: '备注', templet: function (d) {
                            if (d.isFinish == 0) {
                                return `<input type='text' class="layui-input">`
                            } else {
                                return `${d.remark?d.remark:''}`
                            }
                        }
                    },
                    {
                        field: '', title: '操作', width: '16%', templet(d) {
                            html = `<button class='details layui-btn ' lay-event='details' data-id=${d.id} auth="employeeWageInfo">详情</button>`;
                            if (d.isFinish == 0) {
                                return html+=`
                                <button class='qingSuan layui-btn ' data-id=${d.id} lay-event='qingSuan' auth="manageWageClear">清算</button>
                            `
                            } else {
                                return html;
                            }
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function(res, curr, count){
                data1 = [];
                dayValueLists = [];
                for(var i=0;i< res.data.length;i++){
                    data1.push(res.data[i].wage)
                    dayValueLists.push(res.data[i].dayValue);
                }
                permission();
            }
        });
        table.on('tool(test)', function (data) {
            if (data.event == 'qingSuan') {
                var id = data.data.id;
                var settlementAccount = $(this).parent().parent().parent().find('td:nth-child(7) input').val();
                var remark = $(this).parent().parent().parent().find('td:nth-child(10) input').val();
                var yuge = $(this).parent().parent().parent().find('td:nth-child(6) div').html();
                // if (yuge < settlementAccount) {
                //     layer.msg('清算金额不能大于余额！');
                //     return;
                // } else {
                $.ajax({
                    url: url + '/finance/wage/settlement',
                    type: 'post',
                    data: {
                        id: Number(data.data.id),
                        settlementAccount: Number(settlementAccount),
                        remark: remark,
                        token: getToken()
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            tips('结算', r);
                            setTimeout(function () {
                                layer.closeAll();
                                table.reload('lists');
                            }, 2000)
                        } else {
                            tips('结算', r);
                        }
                    }
                })
                // }
            } else if (data.event == 'details') {
                var id = Number($(this).parent().parent().parent().data('index'));
                var baogongfei = '', zagongfei = '', chuqin = '', jiekuan = '',
                    cailiao = '', living = '', bonus = '', fine = "",
                    rgz = dayValueLists[id];
                for (var c in data1[id]) {
                    baogongfei += `<tr><td></td><td>${c}</td><td>${data1[id][c].workmanAccounts}</td></tr>`
                    zagongfei += `<tr><td></td><td>${c}</td><td>${data1[id][c].handymanAccounts}</td></tr>`
                    chuqin += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].attendance}</td></tr>`
                    jiekuan += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].loan}</td></tr>`
                    cailiao += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].materialAccounts}</td></tr>`
                    living += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].living}</td></tr>`
                    bonus += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].bonus}</td></tr>`
                    fine += `<tr><td>1</td><td>${c}</td><td>${data1[id][c].fine}</td></tr>`
                }
                layer.open({
                    type: 1,
                    title: "详情",
                    area: ['60%', '70%'],
                    content: `
                        <div class="layui-row layui_open" style="height: 100%;overflow: auto;">
                            <div class="layui-col-md12" style='margin-top:0'>
                                <div class="layui-col-md12" style='margin-top:0'>
                                    <div class="layui-tab">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">包工费</li>
                                            <li>杂工费</li>
                                            <li>出勤工资</li>
                                            <li>材料费</li>
                                            <li>生活费</li>
                                            <li>借款</li>
                                        </ul>
                                        <div class="layui-tab-content">
                                            <div class="layui-tab-item layui-show">
                                                <table class='layui-table' lay-size="sm" id='one'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>分账时间</th>
                                                            <th>分账金额</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${baogongfei}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="layui-tab-item">
                                                <table class='layui-table' lay-size="sm" id='zagong'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>分账时间</th>
                                                            <th>分账金额</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${zagongfei}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="layui-tab-item">
                                                <p>日工值:${rgz}</p>
                                                <table class='layui-table' lay-size="sm" id='two'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>出勤日期</th>
                                                            <th>出勤时长</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${chuqin}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="layui-tab-item">
                                                <table class='layui-table' lay-size="sm" id='three'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>购买时间</th>
                                                            <th>售出价格</th>
                                                        </tr>
                                                    </thead>
                                                    ${cailiao}
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="layui-tab-item">
                                                <table class='layui-table' lay-size="sm" id='four'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>时间</th>
                                                            <th>金额</th>
                                                        </tr>
                                                    </thead>
                                                    ${living}
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="layui-tab-item">
                                                <table class='layui-table' lay-size="sm" id='six'>
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>借款时间</th>
                                                            <th>借款金额</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${jiekuan}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td>编号</td>
                                                            <td>总计</td>
                                                            <td class="tfoots"></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `,
                    btn: ['关闭'],
                    skin: 'my-skin'
                })
                table1($('#one tbody tr'));
                table1($('#two tbody tr'));
                table1($('#three tbody tr'));
                table1($('#four tbody tr'));
                table1($('#five tbody tr'));
                table1($('#six tbody tr'));
                table1($('#seven tbody tr'));
                table1($('#eight tbody tr'));
                table1($('#nine tbody tr'));
                table1($('#zagong tbody tr'));
                $('#one tfoot .tfoots').html(tfoot($('#one tbody tr')));
                $('#two tfoot .tfoots').html(tfoot($('#two tbody tr')));
                $('#three tfoot .tfoots').html(tfoot($('#three tbody tr')));
                $('#four tfoot .tfoots').html(tfoot($('#four tbody tr')));
                $('#five tfoot .tfoots').html(tfoot($('#five tbody tr')));
                $('#six tfoot .tfoots').html(tfoot($('#six tbody tr')));
                $('#seven tfoot .tfoots').html(tfoot($('#seven tbody tr')));
                $('#eight tfoot .tfoots').html(tfoot($('#eight tbody tr')));
                $('#zagong tfoot .tfoots').html(tfoot($('#zagong tbody tr')));
            }
            $('table thead input').click(function () {
                if ($(this).prop('checked')) {
                    $('table tbody input[type="checkbox"]').prop('checked', true);
                } else {
                    $('table tbody input[type="checkbox"]').prop('checked', false);
                }
            })
        })

        $('body').on('click', '#search', function () {
            var search = $('#searchInput').val();
            var projectId = $('#projectId').val();
            var yearId = $('#yearId').val();
            var professionId = $('#professionId').val();
            var isFinish = $('#isFinish').val();
            data1 = [];
            dayValueLists = [];
            table.reload('lists', {
                where: {
                    "projectId": Number(projectId),
                    "yearId": Number(yearId),
                    "professionId": Number(professionId),
                    "isFinish":isFinish,
                    "search": search,
                },page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        })
        $('body').on('click', '.derive', function () {
            layer.open({
                type: 1,
                title: "导出",
                area: ["40%", '30%'],
                content: `<p class='one_p'>文件正在生成中,请稍等!</p>`,
                btn: ['关闭'],
                skin: 'my-skin'
            });

            //工种ID
            var professionId = Number($('#peopleType option:selected').val());
            if (professionId == '0') {
                professionId = null;
            }
            var status = Number($('#status option:selected').val()); //工人状态
            if (status == '0') {
                status = null;
            }
            var search = $('#searchInput').val(); //姓名或工号
            $.ajax({
                url: url + '/excel/export/eWageLists',
                type: 'post',
                data: {
                    projectId: Number($.parseJSON(localStorage.getItem('login_msg')).projectId),
                    professionId: professionId,
                    status: status,
                    search: search,
                    token: getToken()
                },
                dataType: 'json',
                success: function (r) {
                    if (r.code == 100000) {
                        tips('导出', r);
                    } else {
                        tips('导出', r);
                    }
                }
            })
        })
    });

    function table1(ind) {
        for (var i = 0; i < ind.length; i++) {
            ind.eq(i).find('td:first').html(i + 1);
        }
    }

    function tfoot(tr) {
        var trs = '';
        for (var i = 0; i < tr.length; i++) {
            trs = Number(trs) + Number(tr.eq(i).find('td:last').html());
        }
        return trs;
    }
</script>

</html>